<template>
  <div class="creation-manager">
    <!-- 顶部搜索与创建 -->
    <div class="top-bar" ref="topBox">
      <div class="top-left">
        <div class="title">协作管理</div>
        <div class="dz">作品管理<span>/协作管理</span></div>
      </div>
      <div class="top-right">

        <el-button class="cj-btn" type="primary" icon="el-icon-plus"  @click="openAddMemberDialog">添加人员</el-button>
      </div>
    </div>
    <div class="neiRongBox" :style="'height:'+tableHeight+'px'">
      <!-- 作品列表 -->
      <div class="table-header" v-if="creations.length > 0">
        <div class="column">
          <div class="header-item xh">序号</div>
          <div class="header-item xm">姓名</div>
          <div class="header-item cz">操作</div>
        </div>
        <div class="column">
          <div class="header-item xh">序号</div>
          <div class="header-item xm">姓名</div>
          <div class="header-item cz">操作</div>
        </div>
      </div>
      <div class="collaboration-list">
        <div class="column" v-for="(columnData, columnIndex) in columns" :key="columnIndex">
          <div
            class="collaboration-item"
            v-for="(item, index) in columnData"
            :key="index"
          >
            <div class="circle">{{ item.index }}</div>
            <div class="name">
              <div class="surname-circle">{{ item.name.charAt(0) }}</div>
              <span>{{ item.name }}</span>
            </div>
            <div class="actions">
              <el-button type="text" @click="openEditPermissionsDialog(item)">权限管理</el-button>
              <el-button type="text" @click="removeCollaborator(item)" class="delete-btn">移除</el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 空数据提示 -->
      <div class="empty-data" v-if="creations.length==0">
        <img src="@/assets/images/noSj.png" alt="">
        <div>您还没有作品，点击 <span @click="openCreateDialog" class="create-link">创建作品</span> 开始创作吧！</div>
      </div>
    </div>
    <!-- 分页 -->
    <el-pagination style="float:right"
      prev-text="上一页"
      next-text="下一页"
      v-if="creations.length > 0"
      background
      layout="prev, pager, next"
      :total="pagination.total"
      @current-change="fetchCreations"
    ></el-pagination>

    <!-- 添加人员弹窗 -->
    <el-dialog title="添加人员" :visible.sync="addMemberDialogVisible" width="500px" center>
      <div class="hyTitle">
        <div class="all">好友列表：132人</div><div class="hasX">已选：5人</div>
      </div>
      <div class="hyList">
        <div class="hyItem" v-for="(item,i) in friends">
          <div class="surname-circle">{{ item.name.charAt(0) }}</div>
          <div class="hyName">{{item.name}}</div>
          <div class="xz"><i></i></div>
        </div>
      </div>

      <div class="dialog-footer">
        <el-button @click="addMemberDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addMembers">确定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑权限弹窗 -->
    <el-dialog title="编辑权限" :visible.sync="editPermissionDialogVisible" width="600px" center>
      <div class="qxList">
        <div class="qxItem" v-for="(item,i) in permissions">
          <div class="xz"><i></i></div>
          <div class="name">{{item.volume}}</div>
          <div class="qx">
              <el-select v-model="item.permission" placeholder="请选择">
                <el-option label="可编辑" value="edit"></el-option>
                <el-option label="可查看" value="view"></el-option>
                <el-option label="可评论" value="comment"></el-option>
              </el-select>
          </div>
        </div>
      </div>
      <div class="dialog-footer">
        <el-button @click="editPermissionDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="savePermissions">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { Message } from 'element-ui';
import {getClassify, getCreationsList} from "@/api/work";
export default {
  data() {

    return {
      tableHeight:'200',
      creations:[],
      members: [
        { index: 1, name: "张三" },
        { index: 2, name: "李四" },
        { index: 3, name: "王五" },
        { index: 4, name: "赵六" },
        { index: 5, name: "钱七" },
        { index: 6, name: "孙八" },
        { index: 7, name: "周九" },
        { index: 8, name: "吴十" },
        { index: 9, name: "郑十一" },
        { index: 10, name: "冯十二" },
      ],
      showRemoveDialog:false,
      friends: [
        { id: 1, name: "张三" },
        { id: 2, name: "李四" },
        { id: 3, name: "王五" },
        { id: 4, name: "赵六" },
      ],
 // 权限选项
      selectedFriends: [],
      addMemberDialogVisible: false,
      editPermissionDialogVisible: false,
      permissions: [
        { volume: "第一章", permission: "edit" },
        { volume: "第二章", permission: "view" },
      ],
      pagination: {

        total: 0,
        page: 1,
        limit: 10,
      },
      createForm: {
        title: '',
        classify_id: null,
        cover_image: '',
      },
      classifyList: [],
    };
  },
  computed: {
    // 数据分为两列
    columns() {
      const mid = Math.ceil(this.members.length / 2);
      return [this.members.slice(0, mid), this.members.slice(mid)];
    },
  },
  created() {
    this.fetchCreations();
    // 模拟数据加载
    this.collaborators = Array.from({ length: 30 }, (v, i) => ({
      order: i + 1,
      name: `协作者 ${i + 1}`,
    }));
    this.friends = Array.from({ length: 10 }, (v, i) => ({
      id: i + 1,
      name: `好友 ${i + 1}`,
    }));
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  mounted() {
    this.$nextTick(()=>{
      this.handleResize()
    })
    window.addEventListener('resize', this.handleResize)
  },
  methods: {

    handleResize() {
      this.tableHeight=window.innerHeight-120-this.$refs.topBox.clientHeight;
    },
    openAddMemberDialog() {
      this.addMemberDialogVisible = true;
    },
    confirmAddMembers() {
      // 添加人员逻辑
      this.addMemberDialogVisible = false;
      console.log('添加的成员：', this.selectedFriends);
    },
    openEditPermissionsDialog(row) {
      this.editPermissionDialogVisible = true;
      console.log('编辑权限的成员：', row);
    },
    confirmEditPermissions() {
      // 确认权限编辑逻辑
      this.editPermissionDialogVisible = false;
      console.log('编辑后的权限：', this.permissions);
    },
    removeCollaborator(row) {
      // 移除协作者逻辑
      this.collaborators = this.collaborators.filter((c) => c !== row);
      console.log('移除的协作者：', row);
    },
    removeZP(item){
      this.showRemoveDialog = true;
      this.removeID=item.creation_id
    },
    initTime(time){
       return time.split('T')[0]
    },
    // 获取作品列表
    fetchCreations(page = 1) {
      this.pagination.page = page;

      getCreationsList({ page: this.pagination.page,
        limit: this.pagination.limit, }).then(res => {
        console.log(res)
        this.creations = res.creations;
        this.navList=res.stats;
        this.pagination.total = res.data.stats.total;
        console.log(res)
      });

    },
    // 获取分类数据

    // 搜索
    handleSearch() {
      this.fetchCreations();
    },
    // 切换标签
    handleTabChange() {
      this.fetchCreations();
    },
    // 打开创建弹窗
    openCreateDialog() {
      this.showDialog = true;
    },
    // 上传封面图片
    handleUploadSuccess(response) {
      this.createForm.cover_image = response.data.path;
    },
    beforeUpload(file) {
      const isImage = file.type.startsWith('image/');
      if (!isImage) Message.error('只支持上传图片类型文件');
      return isImage;
    },
    //删除作品
    removeSubmit(){

    },
    // 创建作品
    handleSubmit() {
      this.$axios
        .post('/api/v1/creations/create', this.createForm)
        .then(() => {
          Message.success('作品创建成功');
          this.showDialog = false;
          this.fetchCreations();
        })
        .catch(() => Message.error('创建失败'));
    },
  },
};
</script>

<style scoped>
.creation-manager {
  padding: 24px 22px;
}
.top-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px;
}
.top-left .title{
  font-size: 20px;
  font-weight: bold;
  line-height: 28px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

}
.top-left .dz{
  font-size: 12px;
  font-weight: 400;
  line-height: 25px;
  text-align: left;
  text-underline-position: from-font;
  text-decoration-skip-ink: none;

}
.search-input {
  width: 400px;
}
.tabs {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

.creation-list{
  overflow: auto;
}
.creation-list .creation-card {
  width: 185px;
  overflow: hidden;
  text-align: center;
  margin-bottom: 32px;
  margin-right: 24px;
  position: relative;
  float:left;
}
.cover-image {
  width: 185px;
  height: 247px;
  object-fit: cover;
  border-radius: 4px 4px 4px 4px;

}
.gxsj{
  font-size: 12px;
  color: #FFFFFF;
  line-height: 30px;
  position: absolute;
  top:224px;
  width: 100%;
  text-align: center;
  left:0;
  height: 30px;
  background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, #000000 100%);
}
.creation-info{
  margin-top: 8px;
}
.creation-info .name {
  line-height: 22px;
  font-weight: 400;
  font-size: 16px;
  color: #00011B;
  margin-bottom: 4px;
}
.creation-info .wz {
  font-size: 12px;
  color: rgba(0,1,27,0.5);
  line-height: 14px;
}
.empty-data {
  text-align: center;
  color: rgba(0, 1, 27, 0.50);
  padding-top: 360px;
  font-size: 14px;
}
.empty-data  img{
  width: 140px;
  height: 120px;
}
.create-link {
  color: #165DEB;
  cursor: pointer;

}
.search-input ::v-deep .el-input__inner{
  height: 46px;
  line-height: 46px;
  font-size: 16px;
  border-radius: 8px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.search-input ::v-deep .el-button--medium{
  border-radius: 8px;
  background: #165DEB;
  color:#fff;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.search-btn,.cj-btn{
  height: 46px;
  line-height: 46px;
  font-size: 16px;
  padding: 0 25px;
  font-weight: bold;
  border-radius: 8px;


}
.cj-btn{
  margin-left: 25px;

}
::v-deep .el-tabs__nav-wrap::after{
  display: none;
}
::v-deep .el-tabs__active-bar{
  display: none;
}
::v-deep .el-tabs__item{
  font-size: 16px;
  padding: 0 16px;
  font-weight: normal;
  height: 22px;
  line-height: 22px;
}
::v-deep .el-tabs__item.is-active{
  font-weight: bold;
}
.px{
  float:right;
  font-size: 14px;
  color: #00011B;
  line-height: 20px;
}
.px i{
  margin-left: 2px;
}
.px.active{
  color: rgba(22, 93, 235, 1);
}
.pxitem{
  text-align: center;
  color: #00011B;

  font-size: 14px;
  line-height: 20px;
  margin: 20px 0;
}
.pxitem:hover{
  color: #165DEB;
  cursor: pointer;

}
.moreCz{
  position: absolute;
  right: 10px;
  top:10px;
  background: rgba(0,1,27,0.6);
  color:#fff;
  height: 24px;
  width: 24px;
  padding: 0;
}

/* 表头样式 */
.table-header {
  display: flex;
  gap: 20px; /* 列间距 */
}

.table-header .column {
  flex: 1;
}

.header-item {
  padding: 9px 0;
  font-weight: bold;
  font-size: 14px;
  color: rgba(0,1,27,0.5);
  text-align: left;
}

/* 列表样式 */
.collaboration-list {
  display: flex;
  gap: 20px; /* 列间距 */
}

.column  {
  flex: 1; /* 两列等宽 */
  padding: 0 8px;
}
.table-header .column{
  display: flex;
  border-bottom: 1px solid rgba(0,0,0,0.08);;

}
.column .xm{
  flex:1
}
.column .xh{
  width: 50px;
}
.column .cz{
  width: 50px;
  text-align: right;
}
.collaboration-item {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);;
}

/* 序号圆形背景 */
.circle {
  font-size: 14px;
  color: #00011B;
  width: 40px;
  text-align: left;
}

/* 姓名圆形姓氏样式 */
.surname-circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #165DEB;
  color: #fff;
  text-align: center;
  line-height: 28px;
  font-size: 12px;
  margin-right:8px;
}

.name {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #00011B;
}

/* 操作按钮 */
.actions {
  display: flex;
  gap: 10px; /* 按钮间距 */
}

.delete-btn {
  color: #f56c6c;
  font-size: 14px;
}
.hyList{
  height: 400px;
  overflow-y: auto;
}
.hyTitle{
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #00011B;
  line-height: 16px;
  margin-bottom: 5px;
  margin-top: -10px;
}
.friend-item {
  display: flex;
  align-items: center;
}
.friend-avatar {
  width: 32px;
  height: 32px;
  background-color: #409eff;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
.hyItem{
  line-height: 60px;
  height: 60px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
}
.hyItem .hyName{
  font-size: 14px;
  color: #00011B;
  flex:1;
}

.qxList{
  margin-top: -20px;
}
.qxItem{
  line-height: 54px;
  height: 54px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
}
.qxItem .wxz ,.hyItem .wxz{
  width: 18px;
  height: 18px;
  background-image: url("../../assets/images/wxz.png");
  background-size: cover;
  margin-right: 8px;
}
.qxItem .xz ,.hyItem .xz{
  width: 18px;
  height: 18px;
  background-image: url("../../assets/images/xz.png");
  background-size: cover;
  margin-right: 8px;
}
.qxItem .name{
  font-size: 16px;
  color: #00011B;
  line-height: 20px;
  flex:1;
}
.qxItem .qx{
  font-size: 14px;
  color: #00011B;
  width: 100px;
}
.qx ::v-deep  .el-input__inner{
  border:none !important;
}
</style>

